<script setup>

import {
  ArrowDown, DataAnalysis, Document, List, Memo, Operation,
  Setting,
  Switch, User
} from "@element-plus/icons-vue";
import {ref} from "vue";
import Sidebar from "@/components/Sidebar.vue";

// 导航菜单项
const menuItems = ref([
  { name: '项目概览', path: '/overview', icon: Document },
  { name: '任务管理', path: '/tasks', icon: List },
  { name: '团队管理', path: '/team', icon: User },
  { name: '文档管理', path: '/document', icon: Memo },
  { name: '进度跟踪', path: '/tracking', icon: DataAnalysis },
  { name: '设置', path: '/settings', icon: Setting },
]);

// 是否折叠侧边栏
const isCollapsed = ref(false);

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};
</script>

<template>
  <div class="common-layout">
    <el-container class="common-layout">
      <el-header class="header-container">
        <el-row style="width: 100%;">
          <el-col :span="20">管理信息系统</el-col>
          <el-col :span="4">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                张三<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="Setting">详情</el-dropdown-item>
                  <el-dropdown-item divided :icon="Switch">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
              </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <Sidebar
            :menu-items="menuItems"
            :collapsed="isCollapsed"
            @toggle-collapse="toggleCollapse"
        />
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
  .common-layout {
    height: 100%;
  }
  .header-container {
    border-bottom: #888888 1px solid;
    display: flex;
    align-items: center; /* 垂直居中 */
  }
  .aside-container {
    width: 200px;
    border-right: #888888 1px solid;
  }
  .bd {
    border: 1px solid red;
  }
</style>